<template>
  <div class="market-list">
    <el-row :gutter="20">
      <el-col 
        v-for="item in items" 
        :key="item.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="8"
        class="market-item-col"
      >
        <el-card class="market-item" :body-style="{ padding: '0px' }">
          <div class="item-image" @click="$emit('view-details', item)">
            <el-image :src="item.image" fit="scale-down">
              <template #error>
                <div class="image-error">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <div class="item-rarity" :style="{ background: getRarityColor(item.rarity) }">
              {{ item.rarity }}
            </div>
          </div>
          <div class="item-content">
            <h3 class="item-name" @click="$emit('view-details', item)">{{ item.name }}</h3>
            <div class="item-price">
              <span class="price-label">价格</span>
              <span class="price-value">{{ formatPrice(item.price) }} TRES</span>
            </div>
            <div class="item-seller">
              <span class="seller-label">卖家</span>
              <span class="seller-address">{{ formatAddress(item.owner) }}</span>
            </div>
            <div class="item-actions">
              <el-button 
                type="primary" 
                @click="$emit('buy', item)"
                :disabled="isOwner(item)"
              >
                {{ isOwner(item) ? '正在出售' : '购买' }}
              </el-button>
              <el-button 
                type="default" 
                @click="$emit('view-details', item)"
              >
                查看详情
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 空状态 -->
    <el-empty
      v-if="items.length === 0"
      description="暂无上架宝藏"
    />
  </div>
</template>

<script setup>
import { Picture } from '@element-plus/icons-vue';
import { useWalletStore } from '../../stores/walletStore';

const walletStore = useWalletStore();

// 接收父组件传递的数据
const props = defineProps({
  items: {
    type: Array,
    required: true
  }
});
console.log("items", props.items)

// 定义事件
defineEmits(['buy', 'view-details']);

// 格式化价格显示
const formatPrice = (price) => {
  return Number(price).toFixed(2);
};

// 格式化地址显示
const formatAddress = (address) => {
  if (!address) return '未知';
  return address.slice(0, 6) + '...' + address.slice(-4);
};

// 获取稀有度颜色
const getRarityColor = (rarity) => {
  switch (rarity) {
    case 'Legendary': return 'linear-gradient(135deg, #FFD700, #FFA500)';
    case 'Epic': return 'linear-gradient(135deg, #9932CC, #800080)';
    case 'Rare': return 'linear-gradient(135deg, #0066CC, #000080)';
    case 'Common': return 'linear-gradient(135deg, #32CD32, #006400)';
    default: return 'linear-gradient(135deg, #808080, #404040)';
  }
};

// 检查是否是所有者
const isOwner = (item) => {
  return item.owner.toLowerCase() === walletStore.walletAddress.toLowerCase();
};
</script>

<style scoped>
.market-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.market-stats {
  margin-bottom: 30px;
}

.market-content {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px;
  min-height: 500px; /* 确保内容区域有足够的高度 */
}

/* 调整卡片网格布局 */
.nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* 将最小宽度从 280px 增加到 320px */
  gap: 20px;
  padding: 20px 0;
}

/* 卡片样式 */
.nft-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 320px; /* 相应调整最小宽度 */
}

.nft-image-container {
  height: 200px;
  position: relative;
}

.nft-info {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.nft-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
}

/* 工具栏样式 */
.market-toolbar {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap; /* 在小屏幕上自动换行 */
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.sort-select,
.filter-select {
  width: 150px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .market-toolbar {
    flex-direction: column;
  }
  
  .search-input,
  .sort-select,
  .filter-select {
    width: 100%;
  }
  
  .nft-grid {
    grid-template-columns: 1fr; /* 在小屏幕上每行只显示一个卡片 */
  }
}

/* 统计卡片样式 */
.stat-card {
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}

/* 按钮样式调整 */
.el-button {
  width: 100%; /* 确保按钮填满容器 */
  margin: 5px 0;
}

/* 确保操作按钮容器有足够的空间 */
.item-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap; /* 允许按钮在需要时换行 */
}

.item-actions .el-button {
  flex: 1;
  min-width: 100px; /* 设置最小宽度 */
}

.market-list {
  margin-top: 20px;
}

.market-item-col {
  margin-bottom: 20px;
  min-width: 320px; /* 添加最小宽度限制 */
}

.market-item {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.market-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.item-image {
  position: relative;
  width: 100%;
  height: 200px;
  cursor: pointer;
}

.item-image :deep(.el-image) {
  width: 100%;
  height: 100%;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #909399;
  font-size: 24px;
}

.item-rarity {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.item-content {
  padding: 15px;
}

.item-name {
  margin: 0 0 10px;
  font-size: 16px;
  color: #303133;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-name:hover {
  color: #409EFF;
}

.item-price,
.item-seller {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-label,
.seller-label {
  color: #909399;
  font-size: 14px;
}

.price-value {
  color: #409EFF;
  font-weight: bold;
  font-size: 16px;
}

.seller-address {
  color: #606266;
  font-size: 14px;
}
</style> 